<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Babylon.js sample code</title>

    <!-- Babylon.js -->
    <script src="./js/pep.js"></script>
    <script src="./js/dat.gui.min.js"></script>
    <script src="./js/ammo.js"></script>
    <script src="./js/cannon.js"></script>
    <script src="./js/Oimo.js"></script>
    <script src="./js/libktx.js"></script>
    <script src="./js/earcut.min.js"></script>
    <script src="./js/babylon.js"></script>
    <script src="./js/babylon.inspector.bundle.js"></script>
    <script src="./js/babylonjs.materials.min.js"></script>
    <script src="./js/babylonjs.proceduralTextures.min.js"></script>
    <script src="./js/babylonjs.postProcess.min.js"></script>
    <script src="./js/babylonjs.loaders.js"></script>
    <script src="./js/babylonjs.serializers.min.js"></script>
    <script src="./js/babylon.gui.min.js"></script>

    <style>
        html, body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>
</head>
<body>
<canvas id="renderCanvas"></canvas>
<script>
    var canvas = document.getElementById("renderCanvas");

    var engine = null;
    var scene = null;
    var sceneToRender = null;
    var createDefaultEngine = function() { return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true }); };
    var createScene = function () {
        var scene = new BABYLON.Scene(engine);
        scene.clearColor = new BABYLON.Color3(0.5, 0.5, 0.5);

        // camera
        var camera = new BABYLON.ArcRotateCamera("camera1", 0, 0, 0, new BABYLON.Vector3(0, 0, 0), scene);
        camera.setPosition(new BABYLON.Vector3(6, 8, -7));
        camera.attachControl(canvas, true);
        // lights
        var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);
        light.intensity = 0.8;


        var faceColors = [];
        faceColors[0] = BABYLON.Color3.Blue();
        faceColors[1] = BABYLON.Color3.Red();
        faceColors[2] = BABYLON.Color3.Green();
        faceColors[3] = BABYLON.Color3.White();
        faceColors[4] = BABYLON.Color3.Yellow();
        faceColors[5] = BABYLON.Color3.Black();

        var box = BABYLON.MeshBuilder.CreateBox("Box", { faceColors: faceColors }, scene);
        var small = BABYLON.MeshBuilder.CreateBox("Small", { width: 0.25, depth: 0.25, height: 0.75, faceColors: faceColors }, scene);

        var localOrigin = localAxes(2);
        localOrigin.parent = box;


        var matrix;
        var local_pos;
        var y = 0;
        scene.registerAfterRender(function () {
            box.rotate(BABYLON.Axis.Y, Math.PI / 150, BABYLON.Space.LOCAL);
            box.rotate(BABYLON.Axis.X, Math.PI / 200, BABYLON.Space.LOCAL);
            box.translate(new BABYLON.Vector3(-1, -1, -1).normalize(), 0.001, BABYLON.Space.WORLD)
            small.rotationQuaternion = box.rotationQuaternion;
            matrix = box.getWorldMatrix();
            y += 0.001;
            local_pos = new BABYLON.Vector3(0, y, 0);
            small.position = BABYLON.Vector3.TransformCoordinates(local_pos, matrix);

        })

        /****************************************************************/

        // show axis
        var showAxis = function (size) {
            var makeTextPlane = function (text, color, size) {
                var dynamicTexture = new BABYLON.DynamicTexture("DynamicTexture", 50, scene, true);
                dynamicTexture.hasAlpha = true;
                dynamicTexture.drawText(text, 5, 40, "bold 36px Arial", color, "transparent", true);
                var plane = new BABYLON.Mesh.CreatePlane("TextPlane", size, scene, true);
                plane.material = new BABYLON.StandardMaterial("TextPlaneMaterial", scene);
                plane.material.backFaceCulling = false;
                plane.material.specularColor = new BABYLON.Color3(0, 0, 0);
                plane.material.diffuseTexture = dynamicTexture;
                return plane;
            };

            var axisX = BABYLON.Mesh.CreateLines("axisX", [
                new BABYLON.Vector3.Zero(), new BABYLON.Vector3(size, 0, 0), new BABYLON.Vector3(size * 0.95, 0.05 * size, 0),
                new BABYLON.Vector3(size, 0, 0), new BABYLON.Vector3(size * 0.95, -0.05 * size, 0)
            ], scene);
            axisX.color = new BABYLON.Color3(1, 0, 0);
            var xChar = makeTextPlane("X", "red", size / 10);
            xChar.position = new BABYLON.Vector3(0.9 * size, -0.05 * size, 0);
            var axisY = BABYLON.Mesh.CreateLines("axisY", [
                new BABYLON.Vector3.Zero(), new BABYLON.Vector3(0, size, 0), new BABYLON.Vector3(-0.05 * size, size * 0.95, 0),
                new BABYLON.Vector3(0, size, 0), new BABYLON.Vector3(0.05 * size, size * 0.95, 0)
            ], scene);
            axisY.color = new BABYLON.Color3(0, 1, 0);
            var yChar = makeTextPlane("Y", "green", size / 10);
            yChar.position = new BABYLON.Vector3(0, 0.9 * size, -0.05 * size);
            var axisZ = BABYLON.Mesh.CreateLines("axisZ", [
                new BABYLON.Vector3.Zero(), new BABYLON.Vector3(0, 0, size), new BABYLON.Vector3(0, -0.05 * size, size * 0.95),
                new BABYLON.Vector3(0, 0, size), new BABYLON.Vector3(0, 0.05 * size, size * 0.95)
            ], scene);
            axisZ.color = new BABYLON.Color3(0, 0, 1);
            var zChar = makeTextPlane("Z", "blue", size / 10);
            zChar.position = new BABYLON.Vector3(0, 0.05 * size, 0.9 * size);
        };

        //Local Axes
        function localAxes(size) {
            var pilot_local_axisX = BABYLON.Mesh.CreateLines("pilot_local_axisX", [
                new BABYLON.Vector3.Zero(), new BABYLON.Vector3(size, 0, 0), new BABYLON.Vector3(size * 0.95, 0.05 * size, 0),
                new BABYLON.Vector3(size, 0, 0), new BABYLON.Vector3(size * 0.95, -0.05 * size, 0)
            ], scene);
            pilot_local_axisX.color = new BABYLON.Color3(1, 0, 0);

            pilot_local_axisY = BABYLON.Mesh.CreateLines("pilot_local_axisY", [
                new BABYLON.Vector3.Zero(), new BABYLON.Vector3(0, size, 0), new BABYLON.Vector3(-0.05 * size, size * 0.95, 0),
                new BABYLON.Vector3(0, size, 0), new BABYLON.Vector3(0.05 * size, size * 0.95, 0)
            ], scene);
            pilot_local_axisY.color = new BABYLON.Color3(0, 1, 0);

            var pilot_local_axisZ = BABYLON.Mesh.CreateLines("pilot_local_axisZ", [
                new BABYLON.Vector3.Zero(), new BABYLON.Vector3(0, 0, size), new BABYLON.Vector3(0, -0.05 * size, size * 0.95),
                new BABYLON.Vector3(0, 0, size), new BABYLON.Vector3(0, 0.05 * size, size * 0.95)
            ], scene);
            pilot_local_axisZ.color = new BABYLON.Color3(0, 0, 1);

            var local_origin = BABYLON.MeshBuilder.CreateBox("local_origin", { size: 1 }, scene);
            local_origin.isVisible = false;

            pilot_local_axisX.parent = local_origin;
            pilot_local_axisY.parent = local_origin;
            pilot_local_axisZ.parent = local_origin;

            return local_origin;

        }

        showAxis(4);

        return scene;
    };
    var engine;
    try {
        engine = createDefaultEngine();
    } catch(e) {
        console.log("the available createEngine function failed. Creating the default engine instead");
        engine = createDefaultEngine();
    }
    if (!engine) throw 'engine should not be null.';
    scene = createScene();;
    sceneToRender = scene

    engine.runRenderLoop(function () {
        if (sceneToRender) {
            sceneToRender.render();
        }
    });

    // Resize
    window.addEventListener("resize", function () {
        engine.resize();
    });
</script>
</body>
</html>
